<template>
    <div class="chat-container">
      <div class="chat-sidebar">
        <!-- 左侧列表内容，例如联系人、群组等 -->
        <ul class="chat-nav">
          <li>比如你可以提出这些问题：</li>
          <li class="no-bullets">北京有哪些非物质文化遗产？</li>
          <!-- ...其他列表项 -->
        </ul>
      </div>
  
      <div class="chat-window">
          <div class="chat-header">
            <p class="title">这里是智能问答系统，你可以向我提出问题</p>
          </div>
          <div class="chat-messages">
            <!-- 聊天消息列表 -->
            <div class="message" v-for="(msg, index) in messages" :key="index">
              <div class="message-content">
                <p>{{ msg.text }}</p>
              </div>
            </div>
          <!-- ...其他消息 -->
          </div>
          <div class="chat-input">
            <textarea placeholder="输入你想要询问的问题..." v-model="message" @keyup.enter="sendMessage"></textarea>
            <button @click="sendMessage">发送</button>
          </div>
       
      </div>
  
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: '',
        messages: [],
      };
    },
    methods: {
      sendMessage() {
        if (this.message.trim() !== '') {
          this.messages.push({
            text: this.message,
          });
          this.message = '';
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .no-bullets{
    font-size:1em;
  }
  .title{
    font-size:2vh;
  }
  .chat-container {
    display: flex;
    width: 100%;
    height: 100vh; /* 占据整个视口高度 */
  }
  
  .chat-sidebar {
    margin-top: 5vh;
    width: 23%;
    background-color: #F1EDE6; /* 示例背景色 */
    padding: 1em;
    box-sizing: border-box;
    .no-bullets {
      list-style-type: none;
      /* 还可以添加一些额外的样式来美化列表项 */
      padding-left: 0; /* 去掉列表左侧的默认填充 */
    }
    .chat-nav{
      font-size: 1.2vw;
      line-height:1.5;
    }
  }
  
  .chat-window {
    margin-top:5vh;
    width: 80%;
    background-image: url("bird.png"),url("back.png"); /* 替换为你的背景图片路径 */
    background-attachment: fixed,fixed;
    background-size: cover,center;
    background-position: center,center;
    background-repeat: no-repeat,no-repeat;
    padding: 1em;
    box-sizing: border-box;
  }
  
  .chat-header {
    /* 聊天窗口的标题样式 */
    padding: 0.5em;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    border-bottom: 0.1em solid #ccc;
    .title{
      text-align: center;
      font-size: 1.3em;
      font-weight: bold;
  
    }
  }
  
  .chat-messages {
    /* 聊天消息列表的样式 */
    height: calc(100% - 1em); /* 减去标题和输入框的高度 */
    overflow-y: auto; /* 垂直滚动 */
    padding: 1em;
    box-sizing: border-box;
    .message-content{
      font-size: 1em;
    }
  }
  
  .message {
    /* 单条消息的样式 */
   /* margin-bottom: 10px;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.9); !* 半透明白色背景 *!
    border-radius: 5px;*/
    margin-bottom: 1em;
    padding: 0.2em 0.3em;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    border-radius: 1vw; /* 使用vw作为圆角大小单位 */
    width: 80%;
    height:3em;
  }
  
  .chat-input {
    /* 输入框和发送按钮的样式 */
    position: sticky;
    bottom: 0;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 12vh;
  }
  
  .chat-input textarea {
   /* flex: 1;
    resize: none;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 25px;*/
    flex: 1;
    resize: none;
    padding: 0.5vw;
    border-radius: 1vw; /* 使用vw作为圆角大小单位 */
    border: 0.1vw solid #ccc; /* 使用vw作为边框宽度单位 */
    font-size: 1.5vw; /* 使用vw作为字体大小单位 */
    height: 5vh;
  }
  
  .chat-input button {
    /*margin-left: 10px;
    padding: 10px 10px;
    border-radius: 5px;
    border: 4px solid saddlebrown;
    background-color: #F1EDE6;*/
    margin-left: 1vw;
    padding: 1vw 1vw;
    border-radius: 1vw; /* 使用vw作为圆角大小单位 */
    border: 0.2vw solid saddlebrown; /* 使用vw作为边框宽度单位 */
    background-color: #F1EDE6;
    height: 5vh;
    line-height: 1vh;
  }
  </style>
  